  <div id="processFlowChart"></div>
  
  <script>
    
    function createProcessFlowChart(chartID, chartTitle) {
    $(chartID).kendoDiagram({
        title: {
            text: chartTitle
        },
        dataSource: [
            { id: "one", name: "C", minWidth: 5, minHeight: 5, width: 40, height: 40, type: "circle"},
          	{ id: "two", name: "B", minWidth: 5, minHeight: 5, width: 40, height: 40, type: "circle" },
            { id: "three", name: "A", minWidth: 5, minHeight: 5, width: 40, height: 40, type: "circle" },
						{ id: "one", name: "", minWidth: 5, minHeight: 5, width: 40, height: 40, type: "circle" },
            { id: "four", name: "A very long label separated by <br/> label label label"},
            { id: "five", name: "A very long label separated by /n label \n label \\n label"},
						{ id: "six", name: "A really long label <br /> label label /n label 2" }
        ],
        connectionsDataSource: [
            { from: "one", to: "four", label: "1 to 4" },
            { from: "two", to: "four", label: "2 to 4"},
            { from: "three", to: "four", label: "3 to 4" },
            { from: "four", to: "five", label: "4 to 5" },
            { from: "four", to: "six", label: "4 to 6" }
        ],
        layout: {
            type: "layered",
            subtype: "right",
          	nodeDistance: 80,
          	layerSeparation: 200
        },
        editable: false,
        zoom: 0.8,
        minZoom: 0.8,
        maxZoom: 0.8,
        zoomRate: 1,
        shapeDefaults: {
            type: "rectangle",
            fill: "#B9AD97",
            content: {
              template: "#: name #"
            },
            width: 150,
            height: 150,
            hover: {
                fill: "#B9AD97"
            }
        },
        connectionDefaults: {
            stroke: {
                color: "#979797",
                width: 1
            },
            type: "cascading",
            startCap: "FilledCircle",
            endCap: "ArrowEnd",
            content: {
              template: "#= label #"              
            }
        },

        autoBind: true,
		zoomStart: onZoomStart
    });
}
    
    /* Capture the zoom event for a chart and kill it off - no zooming allowed */
function onZoomStart(e) {
    e.preventDefault();
}
  </script>
  
   <script>
    createProcessFlowChart("#processFlowChart", "SIMPLIFIED PROCESS FLOW ");
  </script>
  